<template>
    <div class="lookselfbox">
        <!---拍卖预告中-->
        <div class="quchushou-btn"  v-if="dtData.sellModel==1 && dtData.sellStatus==0"> 
            <my-button :text='tip1' :styleType="2" @click="cancelAuction"/>
        </div>
        <!---/拍卖预告中-->

        <!---出售中-->
        <div class="quchushou-btn" v-else-if="dtData.sellModel==0 && dtData.sellStatus==10"> 
            <my-button :text='tip2' :styleType="2" @click="cancelSell"/>
        </div>
        <!---/出售中-->

        <!---拍卖中-->
        <template v-else-if="dtData.sellModel==1 && dtData.sellStatus==10">
            <div class="paimaizhong-price" v-if="dtData.transactionEthPrice">
                <div class="pmzitem">
                    <p v-t="'sell.tip3'">Current Bid</p>
                    <div class="pmPrice">{{dtData.transactionEthPrice.decimalFourString}}<span>ETH</span></div>
                    <div class="jgmy">≈ ${{dtData.transactionUsdPrice.decimalTwoString}}</div>
                </div>
                <div class="pmzitem">
                    <p v-t="'sell.tip4'">Auction End at</p>
                    <div class="pmPrice">
                        <count-down :dataTime="dtData.endTime" />
                    </div>
                    <div class="jgmy">&nbsp;</div>
                </div>
            </div>
            <div class="pmz-btn-box">
                <!-- <div class="ljcj"><my-button text='Bid Now' :styleType="2" @click="auctionBidFlag=true"/> </div> -->
                <a @click="bidRecordFlag=true" v-t="'sell.tip5'">View Bid History</a>
                <auction-bid v-if="auctionBidFlag" @close="closeDg"/>
            </div>
        </template>
        <!---/拍卖中-->


   
      
        <!---直售成功、结束-->
        <template v-else-if="dtData.sellModel==0 && dtData.sellStatus==20">
            <template v-if="sellMyType==3 && dtData.winAddress"><!---我发起的直售-->
                <div class="sell-dt-tips">
                    <template v-if="userInfo.walletAddress.toLowerCase()!=dtData.winAddress.toLowerCase()">
                        <img src="/images/success.png"/>
                        <p v-t="'sell.tip6'">Successful sale</p>
                    </template>
                    <template v-else>
                        <img src="/images/gth.png"/>
                        <p v-t="'sell.tip7'">End of sale</p>
                    </template>
                </div>
                <template v-if="userInfo.walletAddress.toLowerCase()!=dtData.winAddress.toLowerCase()">
                    <div class="dealPrice dealPrice2" v-if="dtData.transactionEthPrice">
                        <label v-t="'sell.tip8'">Transaction price</label>
                        <span> <img src="/images/priceIcon.png" alt=""> </span>
                        {{dtData.transactionEthPrice.decimalFourString}}
                        <em class="usd">(${{dtData.transactionUsdPrice.decimalTwoString}})</em>
                    </div>
                    <div class="huodezhe">
                        <label v-t="'sell.tip9'">Winner:</label>
                        <span><Image :url="dtData.ownerHeadImage"></Image></span>
                        <p>{{dtData.winName}}</p>
                    </div>
                </template>
            </template>
            <template v-else-if="sellMyType==4 && dtData.winAddress"> <!---我参与的直售-->
                <div class="sell-dt-tips">
                    <template v-if="userInfo.walletAddress.toLowerCase()==dtData.winAddress.toLowerCase()"><!---购买成功-->
                        <img src="/images/success.png"/>
                        <p v-t="'sell.tip10'">Congratulations！ your purchase was successful</p>
                    </template>
                    <template v-else>
                        <img src="/images/gth.png"/>
                        <p v-t="'sell.tip11'">Purchase failed</p>
                    </template>
                </div>
                <!-- <div class="dealPrice dealPrice2" v-if="dtData.transactionEthPrice">
                    <label >Transaction price</label>
                    <span> <img src="/images/priceIcon.png" alt=""> </span>
                    {{dtData.transactionEthPrice.decimalFourString}}
                    <em class="usd">(${{dtData.transactionUsdPrice.decimalTwoString}})</em>
                </div>
                <div class="huodezhe">
                    <label for="">Winner:</label>
                    <span><Image :url="dtData.ownerHeadImage"></Image></span>
                    <p>{{dtData.winName}}</p>
                </div> -->
            </template>
        </template>
        <!---/直售成功、结束-->

        <!---拍卖结束:拍卖成功、拍卖失败-->
        <template v-else-if="dtData.sellModel==1 && dtData.sellStatus==20">
            <template v-if="sellMyType==1 && dtData.winAddress"><!---我发起的拍卖-->
                <div class="sell-dt-tips">
                    <template v-if="userInfo.walletAddress.toLowerCase()!=dtData.winAddress.toLowerCase()">
                        <img src="/images/success.png"/>
                        <p v-t="'sell.tip12'">Successful auction</p>
                    </template>
                    <template v-else>
                        <img src="/images/gth.png"/>
                        <p v-t="'sell.tip13'">End of auction</p>
                    </template>
                </div>
                <template v-if="userInfo.walletAddress.toLowerCase()!=dtData.winAddress.toLowerCase()">
                    <div class="dealPrice dealPrice2">
                        <label v-t="'sell.tip8'">Transaction price</label>
                        <span> <img src="/images/priceIcon.png" alt=""> </span>
                        {{dtData.transactionEthPrice.decimalFourString}}
                        <em class="usd">(${{dtData.transactionUsdPrice.decimalTwoString}})</em>
                    </div>
                    <div class="huodezhe">
                        <label v-t="'sell.tip9'">Winner:</label>
                        <span><Image :url="dtData.ownerHeadImage" /></span>
                        <p>{{dtData.winName}}</p>
                    </div>
                </template>
                <div class="quchushou-btn"> 
                    <my-button @click="bidRecordFlag=true" text='View Bid History' :styleType="2"/>
                </div>
            </template>
            <template v-else-if="sellMyType==2 && dtData.winAddress"><!---我参与的拍卖-->
                <div class="sell-dt-tips">
                    <template v-if="userInfo.walletAddress.toLowerCase()==dtData.winAddress.toLowerCase()"><!---赢得竞拍-->
                        <img src="/images/success.png"/>
                        <p v-t="'sell.tip14'">Congratulations! You won the auction</p>
                    </template>
                    <template v-else><!---未赢得竞拍-->
                        <img src="/images/gth.png"/>
                        <p v-t="'sell.tip15'">The auction ended and you failed to win the auction</p>
                    </template>
                </div>
                <div class="dealPrice" v-if="dtData.transactionEthPrice">
                    <label v-t="'sell.tip8'">Transaction price</label>
                    <span> <img src="/images/priceIcon.png" alt=""> </span>
                    {{dtData.transactionEthPrice.decimalFourString}}
                    <em class="usd">(${{dtData.transactionUsdPrice.decimalTwoString}})</em>
                </div>
                <div class="huodezhe">
                    <label v-t="'sell.tip9'">Winner:</label>
                    <span><Image :url="dtData.ownerHeadImage" /></span>
                    <p>{{dtData.winName}}</p>
                </div>
                <div class="quchushou-btn"> 
                    <my-button @click="bidRecordFlag=true" text='View Bid History' :styleType="2"/>
                </div>
            </template>
        </template>
        <!---/拍卖结束-->

        <!---拍卖失败 流拍-->
        <template v-else-if="dtData.sellModel==1 && dtData.sellStatus==30">
            <div class="sell-dt-tips"><!---流拍-->
                    <img src="/images/gth.png"/>
                    <p>The auction has been sold</p>
                </div>
        </template>
        <!---/拍卖失败 流拍-->
        
        <bid-record v-if="bidRecordFlag" @close="bidRecordFlag=flase" :id='dtData.sellRecordId'/>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted,inject } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myButton from '@/components/myButton.vue'
import bidRecord from '@/components/bidRecord.vue'
import cutBorderBox from '@/components/cutBorderBox.vue' 
import myDailog from '@/components/myDailog.vue' 
import auctionBid from './auctionBid.vue'
import countDown from '@/components/countDown.vue'
import Image from '@/components/image.vue'
import { toast,myJsDailog,H5CallAPPFuction } from '@/utils/common'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       myButton,
       bidRecord,
       cutBorderBox,
       myDailog,
       auctionBid,
       countDown,
       Image
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()
        const dtPopClose = inject('dtPopClose')

        const state = reactive({
            dtData:computed(()=>store.state.sell.nftdDetail),
            userInfo:computed(()=>store.state.base.userInfo),
            sellMyType:computed(()=>store.state.sell.sellMyType),
            bidRecordFlag:false,
            auctionBidFlag:false,
            rateObj:{}, // 兑换比例
            tip1:t('sell.tip1'),
            tip2:t('sell.tip2'),
        })

        onMounted(()=>{
             // 定义tradeResults方法，供app调用(app交易处理完成后调用)
             window['tradeResults'] = function (result) { // result：{"success":0,"msg":""}
                if(!result){
                    return toast('No Processing Result') // 没有处理结果
                }
                const rt = JSON.parse(result)
                if(rt.success!=1){ // 取消出错了
                    toast(rt.msg||'Fail')
                }else{
                    toast('Cancellation Succeeded！')
                    setTimeout(() => {
                        dtPopClose() // 关闭详情弹窗
                    }, 1500);
                } 
            }

            store.dispatch('base/get_exchange_rate',{walletAddress:state.userInfo.walletAddress})
            .then(res =>{
                state.rateObj = res.data
                console.log("rateObj:",state.rateObj)
            })
        })

        const cancelSell = ()=>{ // 取消售卖
            const appParams = {
                cancelType:1,
                ...state.dtData
            }
            console.log("appParams:",appParams)
            try {
                // 拍卖出价处理: H5只接受处理结果（tradeResults方法接收）
                H5CallAPPFuction('cancleSale',JSON.stringify(appParams)) 
            } catch (error) {
                toast('调用app失败')
            }
            // myJsDailog({
            //     message:'Please confirm whether to cancel the sale'
            // },()=>{
            //     store.dispatch('sell/camcel_sale',{
            //         sellRecordId:state.dtData.sellRecordId
            //     }).then(res=>{
            //         if(res.success){
            //             toast('Cancel Successfully！')
            //         }else{
            //             toast(res.message)
            //         }
            //     })
            // })
        }

        const cancelAuction = ()=>{ // 取消拍卖
            const appParams = {
                cancelType:2,
                ...state.dtData
            }
            console.log("appParams:",appParams)
            try {
                // 拍卖出价处理: 调用app的auctionBid方法，传入参数交由app处理，H5只接受处理结果（tradeResults方法接收）
                H5CallAPPFuction('cancleSale',JSON.stringify(appParams)) 
            } catch (error) {
                toast('调用app失败')
            }
            // myJsDailog({
            //     message:'Please confirm whether to cancel the auction'
            // },()=>{
            //     store.dispatch('sell/camcel_sale',{
            //         sellRecordId:state.dtData.sellRecordId
            //     }).then(res=>{
            //         if(res.success){
            //             toast('Cancel Successfully！')
            //         }else{
            //             toast(res.message)
            //         }
            //     })
            // })
        }

        const closeDg = ()=>{
            state.auctionBidFlag=false
            context.emit('refresh')
        }
        

        return{
            ...toRefs(state),
            cancelSell,
            cancelAuction,
            dtPopClose,
            closeDg
        }
    }
}
</script>

<style lang="scss" scoped>
    .lookselfbox{
        padding: 15px 0 10px 0;
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        font-size: 28px;
        color: #fff;
        line-height: normal;
        .quchushou-btn{
            width: 280px;
        }
        .paimaizhong-price{
            display: flex;
            height: 200px;
            .pmzitem{
                display: flex;
                flex-flow: column;
                justify-content: center;
                flex: 1;
                background: rgba(103,248,255,0.1);
                padding: 20px 30px;
                &+.pmzitem{
                    margin-left: 20px;
                }
                p{
                    font-size: 30px;
                    color: #82A8D4;
                }
                .pmPrice{
                    font-size: 38px;
                    padding: 5px 0 0 0;
                    span{
                        font-size: 24px;
                        padding: 0 0 0 10px;
                    }
                }
                .jgmy{
                    font-size: 28px;
                    color: #67F8FF;
                    padding: 10px 0 0 0;
                }
            }
        }
        .pmz-btn-box{
            display: flex;
            align-items: center;
            margin: 30px 0 0 0;
            .ljcj{
                width: 250px;
            }
            a{
                display: block;
                color: #67F8FF;
                font-size: 30px;
                margin: 0 0 0 30px;
            }
        }
        .sell-dt-tips{
            display: flex;
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #67F8FF;
            line-height: normal;
            font-size: 28px;
            padding: 0;
            align-items: center;
            //justify-content: center;
            img{
                display: block;
                height: 40px;
            }
            p{
                text-align: left;
                padding: 0 0 0 10px;
            }
        }
        .dealPrice{
            display: flex;
            height: 60px;
            align-items: center;
            //justify-content: center;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            color: #CFFFFF;
            font-size:28px;
            line-height: normal;
            margin: 0 0 10px 0;
            &.dealPrice2{
                margin-top: 10px;
                label{
                    padding-left: 0;
                }
            }
            label{
                color: #fff;
                padding: 0 20px 0 50px;
            }
            span{
                padding: 0 10px 0 0;
                img{
                    display: block;
                    width: 22px;
                }
            } 
            em{
                font-style: normal;
                color: #fff;
            }
        }
        .huodezhe{
            display: flex;
            align-items: center;
            font-weight: 500;
            color: #fff;
            font-family: Inter-Medium, Inter;
            padding: 0 0 30px 0;
            label{
                font-weight: bold;
                color: #CFFFFF;
            }
            span{
                width: 80px;
                height: 80px;
                border-radius:50% ;
                background: #e3e5e7;
                margin: 0 0 0 20px;
                overflow: hidden;
            }
            p{
                padding: 0 0 0 15px;
            }
        }
        
    }
    
</style>